<template>
	<div>
		<el-row class="mk-floor" :getter="10">
		                <el-col :sm="12" :md="6">
		                    <dl>
		                    <dt><i class="info-item-ico el-icon-user-solid ico-count-pv"></i><span class="info-item-txt">今日浏览量(PV)</span></dt>
		                    <dd>0</dd>
		                    </dl>
		                </el-col>
		                <el-col :sm="12" :md="6">
		                    <dl>
		                    <dt style="border-color:#00c29f"><i class="info-item-ico ico-count-uv"></i><span class="info-item-txt">今日浏览量(IP)</span></dt>
		                    <dd style="color:#00c29f">0</dd>
		                    </dl>
		                </el-col>
		                <el-col :sm="12" :md="6">
		                    <dl>
		                    <dt style="border-color:#00bcd4"><i class="info-item-ico ico-count-num"></i><span class="info-item-txt">总会员数</span></dt>
		                    <dd style="color:#00bcd4">2</dd>
		                    </dl>
		                </el-col>
		                <el-col :sm="12" :md="6">
		                    <dl>
		                    <dt style="border-color:#fb9678"><i class="info-item-ico ico-count-other"></i><span class="info-item-txt">今日注册</span></dt>
		                    <dd style="color:#fb9678">0</dd>
		                    </dl>
		                </el-col>
		</el-row>
		            
		<div id="main" style="width: 600px;height:400px;"></div>
	</div>
</template>

<script>
import * as Echarts from 'echarts'; 
export default {
	data(){
		return {
			option :{
			  title: {
			    text: 'Stacked Line'
			  },
			  tooltip: {
			    trigger: 'axis'
			  },
			  legend: {
			    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
			  },
			  grid: {
			    left: '3%',
			    right: '4%',
			    bottom: '3%',
			    containLabel: true
			  },
			  toolbox: {
			    feature: {
			      saveAsImage: {}
			    }
			  },
			  xAxis: {
			    type: 'category',
			    boundaryGap: false,
			    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			  },
			  yAxis: {
			    type: 'value'
			  },
			  series: [
			    {
			      name: 'Email',
			      type: 'line',
			      stack: 'Total',
			      data: [120, 132, 101, 134, 90, 230, 210]
			    },
			    {
			      name: 'Union Ads',
			      type: 'line',
			      stack: 'Total',
			      data: [220, 182, 191, 234, 290, 330, 310]
			    },
			    {
			      name: 'Video Ads',
			      type: 'line',
			      stack: 'Total',
			      data: [150, 232, 201, 154, 190, 330, 410]
			    },
			    {
			      name: 'Direct',
			      type: 'line',
			      stack: 'Total',
			      data: [320, 332, 301, 334, 390, 330, 320]
			    },
			    {
			      name: 'Search Engine',
			      type: 'line',
			      stack: 'Total',
			      data: [820, 932, 901, 934, 1290, 1330, 1320]
			    }
			  ]
			}
		}
	},
	mounted(){
		// 基于准备好的dom，初始化echarts实例
		var myChart = Echarts.init(document.getElementById('main'));
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(this.option);
	}
}
</script>

<style>
</style>
